import React, { Component } from 'react';
import style from './index.module.css';
class Page extends Component {
    render() {
        return (
            <div className='page-container page flex-page' style={{ top: (this.props.page * 100) + '%' }}>
                <div className={style.container3} style={{ transform: `translateY(${100 - this.props.percent}%)` }}>
                    <div className={style.title}>路径(Path)</div>
                    <div className={style.text}>路径用于绘制线条, 曲线, 弧形等等，它只需要设定很少的点，就可以创建平滑流畅的线条（比如贝塞尔曲线）。path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列。每一个命令都用一个关键字母来表示。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。移动到(10,10)这个点的命令，即为“M 10 10”。</div>
                    <div className={style.codeBlock}>
                        <pre className={style.code}><code>
                            {`<svg>
    <path d="
M80 80
A 45 45,0,0,0,125 125
L 125 80 Z" 
stroke="#333" fill="none"/>
</svg>`}</code>
                        </pre>
                        <svg height="130" viewBox="45 45 128 128"><path d="M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z" stroke="#333" fill="none" strokeWidth="2" /></svg>
                    </div>
                    <div className={style.codeBlock}>
                        <pre className={style.code}><code>
                            {`<svg>
    <path d="
M10 10 C 20 10, 10 50, 50 10" 
    stroke="black" fill="transparent"/>
</svg>
`}
                        </code></pre>
                        <svg viewBox='10 10 60 60' height="80">
                            <path d="M10 10 C 10 30, 50 30, 50 10" stroke="black" fill="transparent" />
                        </svg>
                    </div>
                    <div className={style.text}>其中 M-移动起始点 A-绘制弧形 L-绘制直线 C-绘制三次贝塞尔曲线 Z-绘制回原点</div>
                </div>
                <div className={style.container3} style={{ transform: `translateY(${(100 - this.props.percent) * 2.5}%)` }}>
                    <div className={style.title}>填充/描边(Fill/Stroke)</div>
                    <div className={style.text}>fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色，比如说颜色名（像red这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。</div>
                    <div className={style.text}>此外，在SVG中你可以分别定义填充色和边框色的不透明度，属性<b>fill-opacity</b>控制填充色的不透明度，属性<b>stroke-opacity</b>控制描边的不透明度。除此之外，还有<b>stroke-width</b>属性定义了描边的宽度。<b>stroke-linecap</b>属性，控制边框终点的形状。</div>
                    <div className={style.codeBlock}>
                        <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
                            <line x1="40" x2="120" y1="20" y2="20" stroke="black" strokeWidth="20" strokeLinecap="butt" />
                            <line x1="40" x2="120" y1="60" y2="60" stroke="black" strokeWidth="20" strokeLinecap="square" />
                            <line x1="40" x2="120" y1="100" y2="100" stroke="black" strokeWidth="20" strokeLinecap="round" />
                        </svg>
                        <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
                            <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
                                strokeLinecap="round" strokeDasharray="5,10,5" fill="none" />
                            <path d="M 10 75 L 190 75" stroke="red"
                                strokeLinecap="round" strokeWidth="1" strokeDasharray="5,5" fill="none" />
                        </svg>
                        <svg width="160" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
                            <polyline points="40 60 80 20 120 60" stroke="black" strokeWidth="20"
                                strokeLinecap="butt" fill="none" strokeLinejoin="miter" />

                            <polyline points="40 140 80 100 120 140" stroke="black" strokeWidth="20"
                                strokeLinecap="round" fill="none" strokeLinejoin="round" />

                        </svg>

                    </div>
                </div>
                <div className={style.container3} style={{ transform: `translateY(${(100 - this.props.percent) * 4.5}%)` }}>
                    <div className={style.title}>渐变(linearGradient)</div>
                    <svg width="100%" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="Gradient" x1="0" x2="0" y1="0" y2="1">
                                <stop offset="0%" stopColor="red" />
                                <stop offset="50%" stopColor="black" stopOpacity="0" />
                                <stop offset="100%" stopColor="blue" />
                            </linearGradient>
                            <radialGradient id="RadialGradient1">
                                <stop offset="0%" stopColor="red" />
                                <stop offset="100%" stopColor="blue" />
                            </radialGradient>
                            <radialGradient id="GradientPad"
                                cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                                spreadMethod="pad">
                                <stop offset="0%" stopColor="red" />
                                <stop offset="100%" stopColor="blue" />
                            </radialGradient>
                        </defs>
                        <rect x="0" y="15" rx="15" ry="15" width="100" height="100" fill="url(#Gradient)" />
                        <rect x="105" y="15" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)" />
                        <rect x="210" y="15" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)" />
                    </svg>
                    <div className={style.text}>
                        除了一般填充颜色和描边，还可以创建和并在填充和描边上应用渐变色。有两种类型的渐变：线性渐变和径向渐变。
                    </div>
                    <div className={style.text}>
                        线性渐变沿着直线改变颜色，其在defs中定义<b>{`<linearGradient>`}</b>节点来创建。
                    </div>
                    <div className={style.text}>
                        而径向渐变与线性渐变相似，只是它是从一个点开始发散绘制渐变。它在defs中添加一个<b>{`<radialGradient>`}</b>元素来定义渐变。
                    </div>
                </div>
                <div className='title' style={{ transform: `translateX(${this.props.percent - 100}%)` }}>进阶技巧</div>
            </div>
        );
    }
}

export default Page;
